<template>
  <base-page>
    <a-form v-if="searchComponents.length>0" slot="header" layout="inline">
      <a-form-item v-for="item in searchComponents" :key="item.code" :label="item.label">
        <a-input
          v-if="!item.type || item.type=='text'"
          v-model.trim="searchParam[item.code]"
          :placeholder="'输入'+item.label"
        ></a-input>
      </a-form-item>
      <a-form-item>
        <a-button type="primary" icon="search" @click="search">查询</a-button>
      </a-form-item>
    </a-form>
    <base-table
      ref="baseTable"
      :url="action.query"
      slot="main"
      :columns="cls"
      :bordered="false"
      :searchParam="searchParam"
      :tableBtns="defaultTableBtns"
      :optionBtns="optionBtns"
      @selectChange="selectChange"
    />
    <a-modal
      slot="dialog"
      :title="title"
      v-model="visible"
      @ok="handleOk"
      :confirmLoading="confirmLoading"
    >
      <slot name="dialog-form"></slot>
    </a-modal>
  </base-page>
</template>

<script>
export default {
  props: {
    searchComponents: {
      type: Array,
      default() {
        return [];
      }
    },
    columns: {
      type: Array,
      default() {
        return [];
      }
    },
    action: {
      type: Object,
      default() {
        return {
          query: "",
          delete: "",
          save: ""
        };
      }
    },
    title: {
      type: String,
      default: ""
    }
  },
  data() {
    let me = this;
    let optionBtns = [
      {
        icon: "edit",
        code: "edit",
        popover: "编辑",
        editable(record) {
          return record.editabled == 0;
        }
      },
      {
        icon: "delete",
        code: "delete",
        popover: "删除",
        editable(record) {
          return record.editabled == 0;
        },
        handler(code, record) {
          me.batchDelete(code, record);
        }
      }
    ];
    return {
      visible: false,
      confirmLoading: false,
      data: [],
      searchParam: {},
      defaultTableBtns: [
        {
          text: "新增",
          icon: "plus",
          code: "insert",
          type: "primary",
          handler() {
            me.showDialog();
          }
        },
        {
          text: "批量删除",
          icon: "delete",
          code: "batch-delete",
          handler() {
            me.batchDelete("batch-delete");
          }
        }
      ],
      optionBtns: [...optionBtns],
      cls: [
        ...this.columns,
        {
          title: "操作",
          key: "operation",
          scopedSlots: { customRender: "action" },
          fixed: "right",
          width: optionBtns.length >= 4 ? 190 : 100
        }
      ],
      selectedRowKeys: [],
      selectedRows: []
    };
  },
  methods: {
    selectChange(selectedRowKeys, selectedRows) {
      this.selectedRowKeys = selectedRowKeys;
      this.selectedRows = selectedRows;
    },
    search() {
      this.$refs["baseTable"].initLoad();
    },
    showDialog() {
      this.visible = true;
      this.$emit("show");
    },
    batchDelete(flag, record) {
      let me = this;
      me.$confirm({
        title: "操作提示",
        content: "确定要删除选中行数据吗?",
        onOk() {
          let ids = [];
          if (flag == "batch-delete") {
            ids = [...me.selectedRowKeys];
          } else {
            ids = [record.id];
          }
          me.$http.ajax({
            url: me.action.delete,
            data: {
              ids: ids
            },
            success: res => {
              me.$message.success("删除成功");
              me.search();
            }
          });
        }
      });
    },
    handleOk() {
      this.$emit("ok", this.confirmLoading);
    }
  }
};
</script>

<style>
</style>
